// import { observer } from 'mobx-react';
import React from 'react';
import { Icon } from 'amis';
import { BasicPanelItem, BuildPanelEventContext, PanelProps } from 'amis-editor';
import LeftTabs from './Tabs';

class DataPanel extends React.Component<PanelProps, any> {
  render() {
    const { store, manager } = this.props;
    return <LeftTabs store={store} manager={manager} type="lowcode" />;
  }
}
// const TabPanel = observer(DataPanel);

function buildEditorPanel(
  context: BuildPanelEventContext,
  panels: Array<BasicPanelItem>,
) {
  // 多选时不显示
  if (context.selections.length) {
    return;
  }  

  panels.push({
    key: 'renderers',
    icon: 'png-icon renderers-png', // 'fa fa-cube',
    title: (
      <span className="editor-tab-icon" editor-tooltip="字段及组件">
        <Icon icon="editor-renderer" />
      </span>
    ),
    component: DataPanel,
    position: 'left',
    order: -9999,
  });
}
export { buildEditorPanel as LowCodeEditorPanel };
